import { observer } from "mobx-react-lite";
import { useStore } from "@/store";
import { Button } from "@/components";

export const App = observer(() => {
  const store = useStore();

  return (
    <div className="flex flex-col w-full gap-4 h-full justify-center items-center">
      <div className="text-5xl text-sky-500">React+TS+Mobx-Keystone</div>
      <div className="text-3xl text-sky-300">Shadcn-ui + TailwindCss</div>
      <div className="text-xl">Count: {store.count}</div>
      <Button onClick={() => store.add()}>Add</Button>
    </div>
  );
});
